<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="./styles.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tauri App</title>
        <!-- <script type="module" src="./main.js" defer></script> -->
        <script>
            window.addEventListener('DOMContentLoaded', () => {
                console.log('DOMContentLoaded-----')
                const getdata = document.querySelector('#getdata')
                getdata.addEventListener('click', (e) => {
                    e.preventDefault()
                    console.log('getdata')
                    fetch('https://api.github.com/users/octocat')
                        .then((response) => response.json())
                        .then((data) => {
                            console.log('data', data)
                            const greetMsgEl =
                                document.querySelector('#greet-msg')
                            greetMsgEl.textContent = data.login
                        })
                        .catch((error) => {
                            console.error('error', error)
                        })
                })
            })
        </script>
    </head>

    <body>
        <main class="container">
            <h1>Welcome to TauriMan</h1>

            <div class="row">
                <a
                    href="https://tauri.app"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    <img
                        src="./assets/tauri.svg"
                        class="logo tauri"
                        alt="Tauri logo"
                    />
                </a>
                <a
                    href="https://pakeplus.com/"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    <img
                        src="https://files.pakeplus.com/pakeplus.png"
                        class="logo vanilla"
                        alt="JavaScript logo"
                    />
                </a>
            </div>
            <p>Click to get data</p>
            <form class="row" id="greet-form">
                <input id="greet-input" placeholder="Enter a name..." />
                <button type="submit" id="getdata">GET DATA</button>
            </form>
            <p id="greet-msg"></p>
            <video
                src="https://files.pakeplus.com/test.mp4"
                autoplay
                controls
                style="width: 100%; height: 100%"
            ></video>
        </main>
    </body>
</html>
